import Vue from "vue";
import VueRouter from "vue-router";
import MyLogin from "@/views/MyLogin.vue";
import MyInfo from "@/views/MyInfo.vue";
import NotFound from "@/views/NotFound.vue";
import MyUser from "@/views/MyUser.vue";
import MyArticle from "@/views/MyArticle.vue";

import ZheJiang from "@/views/ZheJiang.vue";
import WenZhou from "@/views/WenZhou.vue";
import HangZhou from "@/views/HangZhou.vue";
// vue有一堆的插件,插件的使用方式就是 Vue.use(插件名)
Vue.use(VueRouter); //vue中插件的注册方式 use使用
const router = new VueRouter({
  // mode: "history", //不写就是默认的hash这个值 hash模式(特点多了一个#号) history模式(没有#号)
  // routes用来设置哪个地址对应的是显示哪个组件 映射 规则设置
  //   设置了二条规则
  routes: [
    // 路由重定向 页面刚打开的时候确定是空白的,但是我们可以让路由直接默认切换到/login
    // {path:路径,redirect:路径}
    { path: "/", redirect: "/login" },
    { path: "/login", component: MyLogin },
    { path: "/info", component: MyInfo },
    { path: "/user", component: MyUser },
    // :id就意味着id这块是一个占位符 匹配 /article/1 /article/2
    //命名路由 给路由起一个名字
    { path: "/article/:id", component: MyArticle, name: "article" },

    // { path: "/zhejiang/hangzhou", component: HangZhou },
    // { path: "/zhejiang/wenzhou", component: WenZhou },
    {
      path: "/zhejiang",
      component: ZheJiang,
      children: [
        { path: "hangzhou", component: HangZhou },
        { path: "wenzhou", component: WenZhou },
      ],
    },
    { path: "*", component: NotFound }, //*号类似通配符选择器 可以匹配任意路
  ],
  // linkActiveClass: "heima",
  // linkExactActiveClass: "itcast",
});
export default router;

// 代码应该按功能拆,一个功能一个文件,然后合在一起
// 笔记本 一体机 小零件坏了就要重新买一个新电脑
// 笔记本 一堆零件组件组装在一定

// router 路由实例对象 new VueRouter出来的
// routes 路由规则数组 所以后面有一个s

// 输入的是iphone 13
// iphone 13 精确匹配
// iphone 模糊匹配

// question 问题 ? qa
// /api/books?id=1 -> $route.query.id
// /api/bookds/1 -> $route.params.id

// console.log(3.14);
// console.log(3.14);

// const pi = 3.14
// console.log(pi);
// console.log(pi);
